<script setup>
import { addRecommendPar } from "@/api/lawyer";
import { onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, watch } from "vue";
import { recommendTypeOptions, natureOfBusinessOptions, enterprisesScaleOptions, businessTypeOptions, industryOptions, businessOptions, departmentSizeOptions, revenueRangeOptions } from "@/utils/dict";

const stepsCurrent = ref(0);

const pickerRef = ref(null);
const pickerColumns = ref([]);
const pickerTitle = ref('');
const pickerField = ref('');
function handlePickerOpen(title, field, options) {
  pickerTitle.value = title;
  pickerField.value = field;
  pickerColumns.value = [options];
  pickerRef.value.open();
}
function handlePickerConfirm({value}){
  formData[pickerField.value] = value[0];
}


const pickerTypeRef = ref(null);
const pickerTypeIds = ref(0);
function handlePickerTypeOpen(index) {
  pickerTypeIds.value = index;
  pickerTypeRef.value.open();
}
function handlePickerTypeConfirm({value}){
  transaction.value[pickerTypeIds.value].type = value[0];
}

/** 合作案例 */
const transaction = ref([{key: 1, year: '', type: '诉讼', title: ''}]);
function handleAddTransaction(){
  transaction.value.push({key: Date.now(), year: '', type: '诉讼', title: ''})
}

/** 行业领域 */
const industrySearch = ref('');
const activeIndustry = ref([]);
const industryList = computed(() => {
  return industryOptions.filter(item => item.includes(industrySearch.value));
});
const popupIndustryRef = ref(null);
function handlePopupOpen() {
  if(formData.recommendIndustryFr) {
    activeIndustry.value = formData.recommendIndustryFr.split('、');
  }else {
    activeIndustry.value = []
  }
  popupIndustryRef.value.open()
}
function handlePopupClose() {
  popupIndustryRef.value.close();
}
function handlePopupConfirm() {
  formData.recommendIndustryFr = activeIndustry.value.join('、') || '';
  activeIndustry.value = [];
  popupIndustryRef.value.close();
}
function handleClickIndustryItem(item) {
  if(activeIndustry.value.includes(item)){
    activeIndustry.value.splice(activeIndustry.value.indexOf(item), 1);
  } else {
    activeIndustry.value.push(item);
  }
}
const popupIndustryMoreRef = ref(null);
function handlePopupIndustryMoreOpen() {
  popupIndustryRef.value.close();
  popupIndustryMoreRef.value.open();
}
function handlePopupIndustryMoreClose() {
  popupIndustryMoreRef.value.close();
}
function handlePopupIndustryMoreConfirm() {
  uni.showToast({title: '提交成功', icon: 'none'});
  popupIndustryMoreRef.value.close();
}

/** 业务领域 */
const currentField = ref('');
const activeBusiness = ref([]);
const popupBusinessRef = ref(null);
function handlePopupBusinessOpen(field) {
  currentField.value = field;
  if(formData[field]) {
    activeBusiness.value = formData[field].split('、');
  }else {
    activeBusiness.value = []
  }
  popupBusinessRef.value.open()
}
function handlePopupBusinessClose() {
  popupBusinessRef.value.close();
}
function handlePopupBusinessConfirm() {
  formData[currentField.value] = activeBusiness.value.join('、') || '';
  activeBusiness.value = [];
  popupBusinessRef.value.close();
}
function handleClickBusinessItem(item) {
  if(activeBusiness.value.includes(item)){
    activeBusiness.value.splice(activeBusiness.value.indexOf(item), 1);
  } else {
    activeBusiness.value.push(item);
  }
}
const popupBusinessMoreRef = ref(null);
function handlePopupBusinessMoreOpen() {
  popupBusinessRef.value.close();
  popupBusinessMoreRef.value.open();
}
function handlePopupBusinessMoreClose() {
  popupBusinessMoreRef.value.close();
}
function handlePopupBusinessMoreConfirm() {
  uni.showToast({title: '提交成功', icon: 'none'});
  popupBusinessMoreRef.value.close();
}
const initFormData = uni.getStorageSync("yearFormData") ? JSON.parse(uni.getStorageSync("yearFormData")) : {
  recommendNameFr: "", // 推荐人姓名
  recommendPhoneFr: "", // 推荐人手机号
  recommendType: '',
  recommendCompanyFr: "", // 推荐人律所 OR 公司名称
  recommendJoblevelFr: "", // 职务级别
  recommendJoblevelFrOther: "",
  recommendGradeFr: "", // 企业类型
  recommendLegalFr: "", // 贵司法务部的人数
  recommendRevenueFr: "", // 贵司的年营收范围
  recommendMarketFr: "", // 市值/估值
  recommendTypeFr: "央企/国企", // 公司性质
  recommendIndustryFr: "", // 所处的行业领域
  recommendGoodatFr: "", // 您擅长的业务领域
  isMemberLevel: 1, // 您是否是法佬汇的会员
  isPartake: 1, // 您是否参加过法佬汇的活动
  recommendLawyerName: "", // 律师姓名
  sex: 1, // false
  recommendLawyerCompany: "", // 所在律所
  recommendLawyerYewu: "", // 您推荐他的业务领域
  recommendLawyerBusiness: "", // 您推荐他的业务类型
  recommendLawyerPhone: "", // 电话
  recommendLawyerMail: "", // 邮箱
  isbizval: 1, // 是否合作过该律师
  scoreStartone1: 5, // 专业水平
  scoreStartone2: 5, // 行业经验
  scoreStartone3: 5, // 沟通能力
  scoreStartone4: 5, // 文书水平
  scoreStartone5: 5, // 响应速度
  scoreStartone6: 5, // 资源统筹
  scoreStartone7: 5, // 工作效率
  scoreStartone8: 5, // 服务意识
  scoreStartone9: 5, // 商务经验
  scoreStartone10: 5, // 工作结果
  recommendCon: "",// 推荐理由
  transaction: "" // 合作过项目集
}
/** 表单数据 */
const formData = reactive(initFormData);
watch(formData, (newVal) => {
  uni.setStorage({ key: "yearFormData", data: JSON.stringify(newVal) });
});
/** 校验规则 */
const formRules = {
  recommendNameFr: {
    rules: [{ required: true, errorMessage: "请填写推荐人姓名" }]
  },
  recommendPhoneFr: {
    rules: [{ required: true, errorMessage: "请填写推荐人手机号" }, { format: 'number', errorMessage: '手机号格式错误' }]
  },
  recommendType: {
    rules: [{ required: true, errorMessage: "请推荐人类型" }]
  },
  recommendCompanyFr: {
    rules: [{ required: true, errorMessage: "请填写单位名称" }]
  },
  recommendJoblevelFr: {
    rules: [{ required: true, errorMessage: "请填写职务" }]
  },
  recommendLawyerName: {
    rules: [{ required: true, errorMessage: "请填写被推荐人姓名" }]
  },
  recommendLawyerCompany: {
    rules: [{ required: true, errorMessage: "请填写所属律所名称" }]
  },
  recommendLawyerBusiness: {
    rules: [{ required: true, errorMessage: "请填写您推荐他的业务类型" }]
  },
  recommendLawyerMail: {
    rules: [{ required: true, errorMessage: "请填写律师邮箱" }, { format: 'email', errorMessage: '邮箱错误' }]
  }
};

/** uni-forms 组件实例 */
const formRef = ref(null);
const loading = ref(false);

// 上一步 or 返回
function handlePreviousStep() {
  if(stepsCurrent.value == 0) {
    uni.navigateBack()
  } else {
    stepsCurrent.value--
  }
}

// 下一步 or 提交
async function handleNextStep() {
  if(stepsCurrent.value == 1) {
    if (loading.value) return;

    formRef.value?.validate &&
    formRef.value.validate(async (err) => {
      // 如果校验成功 ，err 返回 null
      if (err) return false;

      loading.value = true;
      // 调用登陆接口
      formData.transaction = JSON.stringify(transaction.value);
      addRecommendPar(formData).then(res=>{
        uni.showToast({title: '提交成功，等待审核...', icon: 'none'});
        uni.removeStorageSync("yearFormData");
        uni.redirectTo({ url: '/pages/user/recommend'});
      }).finally(() => {
        loading.value = false;
      });
    });
    
  } else {
    // 表单校验
    let validateFields = ['recommendNameFr', 'recommendType', 'recommendCompanyFr', 'recommendJoblevelFr'];
    if(formData.recommendType == '客户推荐人') {
      validateFields.push('recommendGradeFr', 'recommendLegalFr', 'recommendIndustryFr');
    }
    const res = await formRef.value.validateField(validateFields);
    // 如果校验未通过，validateField 会返回错误对象（数组），否则为校验对象
    if (Array.isArray(res)) return;
    stepsCurrent.value++
  }
}

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
  <view class="relative overflow-hidden">
    <page-navbar title="推荐律师" :isScrolled="isScrolled"></page-navbar>
    <view class="mx-4 mt-5">
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/steps_1.png" mode="widthFix" />
    </view>
    <view class="mx-4 mt-3 py-3 rounded bg-white">
      <uv-steps :current="stepsCurrent" activeColor="#1373FF" inactiveColor="#999999">
        <uv-steps-item>
          <template v-slot:title>
            <view class="text-(sm #1373FF)">推荐人信息</view>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <view class="text-sm" :class="stepsCurrent > 0 ? 'text-#1373FF': 'text-#999999'">被推荐人信息</view>
          </template>
        </uv-steps-item>
      </uv-steps>
    </view>

    <uni-forms ref="formRef" label-width="0" :model="formData" :rules="formRules">
      <view class="mx-4 mt-3 bg-white p-3 rounded-lg grid gap-3" v-show="stepsCurrent == 0">
        <uni-forms-item name="recommendNameFr">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">推荐人姓名</view>
            <input class="text-(sm right)" v-model="formData.recommendNameFr" placeholder="填写推荐人姓名" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendPhoneFr">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">推荐人手机号</view>
            <input class="text-(sm right)" v-model="formData.recommendPhoneFr" placeholder="填写推荐人手机号" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendType">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold flex-1 before:content-['*'] before:text-red-500 before:mr-1">推荐人类型</view>
            <view class="text-(sm right)"
              :class="{'text-#808080': formData.recommendType == ''}"
              @click="handlePickerOpen('推荐人类型', 'recommendType', recommendTypeOptions)"
            >
            {{formData.recommendType || '选择推荐人类型' }}
            </view>
            <view class="i-ri-arrow-right-s-line text-#808080"></view>
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendCompanyFr">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">单位名称</view>
            <input class="text-(sm right)" v-model="formData.recommendCompanyFr" placeholder="填写单位名称" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendJoblevelFr">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">职务</view>
            <input class="text-(sm right)" v-model="formData.recommendJoblevelFr" placeholder="填写职务" />
          </view>
        </uni-forms-item>

        <template v-if="formData.recommendType == '客户推荐人'">
          <uni-forms-item name="recommendGradeFr" :rules="[{required: true, errorMessage: '请选择企业类型'}]">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold flex-1 before:content-['*'] before:text-red-500 before:mr-1">企业类型</view>
              <view class="text-(sm right)"
                :class="{'text-#808080': formData.recommendGradeFr == ''}"
                @click="handlePickerOpen('企业类型', 'recommendGradeFr', enterprisesScaleOptions)"
              >
              {{formData.recommendGradeFr || '选择企业类型' }}
              </view>
              <view class="i-ri-arrow-right-s-line text-#808080"></view>
            </view>
            <view class="mt-1 text-(xs #999999)">如果是500强企业也是上市公司，请选500强企业项，上面企业类别不符合的时候再选下面的选项</view>
          </uni-forms-item>
          <uni-forms-item name="recommendLegalFr" :rules="[{required: true, errorMessage: '请选择人数'}]">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold flex-1 before:content-['*'] before:text-red-500 before:mr-1">贵司法务部人数</view>
              <view class="text-(sm right)"
                :class="{'text-#808080': formData.recommendLegalFr == ''}"
                @click="handlePickerOpen('法务部人数', 'recommendLegalFr', departmentSizeOptions)"
              >
              {{formData.recommendLegalFr || '选择人数' }}
              </view>
              <view class="i-ri-arrow-right-s-line text-#808080"></view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="recommendRevenueFr">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold flex-1">贵司的年营收范围</view>
              <view class="text-(sm right)"
                :class="{'text-#808080': formData.recommendRevenueFr == ''}"
                @click="handlePickerOpen('年营收范围', 'recommendRevenueFr', revenueRangeOptions)"
              >
              {{formData.recommendRevenueFr || '选择年营收范围' }}
              </view>
              <view class="i-ri-arrow-right-s-line text-#808080"></view>
            </view>
            <view class="mt-1 text-(xs #999999)">可填写上一年度的营收或前三年的平均营收</view>
          </uni-forms-item>
          <uni-forms-item name="recommendMarketFr">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold flex-1">市值/估值</view>
              <view class="text-(sm right)"
                :class="{'text-#808080': formData.recommendMarketFr == ''}"
                @click="handlePickerOpen('市值/估值', 'recommendMarketFr', revenueRangeOptions)"
              >
              {{formData.recommendMarketFr || '选择市值/估值' }}
              </view>
              <view class="i-ri-arrow-right-s-line text-#808080"></view>
            </view>
            <view class="mt-1 text-(xs #999999)">如果是新兴企业，营收数据没有代表性，可填写市值/估值数据</view>
          </uni-forms-item>
          <uni-forms-item name="recommendTypeFr">
            <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">公司性质</view>
              <view class="grid grid-cols-3 gap-3 text-center">
                <view 
                  v-for="(item, index) of natureOfBusinessOptions"
                  :key="index"
                  class="rounded p-2 text-sm/6"
                  :class="[formData.recommendTypeFr == item ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                  @click="formData.recommendTypeFr = item"
                >{{item}}</view>
              </view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="recommendIndustryFr" :rules="[{required: true, errorMessage: '请选择行业领域'}]">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold flex-1 before:content-['*'] before:text-red-500 before:mr-1">贵司所处行业领域</view>
              <view class="text-(sm right) max-w-1/2 line-clamp-1"
                :class="{'text-#808080': formData.recommendIndustryFr == ''}"
                @click="handlePopupOpen()"
              >
              {{formData.recommendIndustryFr || '选择行业领域' }}
              </view>
              <view class="i-ri-arrow-right-s-line text-#808080"></view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="recommendGoodatFr">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold flex-1">您擅长的业务领域</view>
              <view class="text-(sm right) max-w-1/2 line-clamp-1"
                :class="{'text-#808080': formData.recommendGoodatFr == ''}"
                @click="handlePopupBusinessOpen('recommendGoodatFr')"
              >
              {{formData.recommendGoodatFr || '选择业务领域' }}
              </view>
              <view class="i-ri-arrow-right-s-line text-#808080"></view>
            </view>
          </uni-forms-item>
        </template>

        <uni-forms-item name="isMemberLevel">
          <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold">您是否是法佬汇的会员</view>
            <view class="grid grid-cols-2 gap-3 text-center">
              <view 
                class="rounded p-2 text-sm/6"
                :class="[formData.isMemberLevel == 1 ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                @click="formData.isMemberLevel = 1"
              >是</view>
              <view 
                class="rounded p-2 text-sm/6"
                :class="[formData.isMemberLevel == 0 ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                @click="formData.isMemberLevel = 0"
              >否</view>
            </view>
          </view>
        </uni-forms-item>
        <uni-forms-item name="isPartake">
          <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold">您是否参加过法佬汇的活动</view>
            <view class="grid grid-cols-2 gap-3 text-center">
              <view 
                class="rounded p-2 text-sm/6"
                :class="[formData.isPartake == 1 ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                @click="formData.isPartake = 1"
              >是</view>
              <view 
                class="rounded p-2 text-sm/6"
                :class="[formData.isPartake == 0 ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                @click="formData.isPartake = 0"
              >否</view>
            </view>
          </view>
        </uni-forms-item>
      </view>

    
      <template v-if="stepsCurrent == 1">
        <view class="mx-4 mt-3 bg-white p-3 rounded-lg grid gap-3">
          <view class="text-lg">被推荐人基本信息</view>
          <uni-forms-item name="recommendLawyerName">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">被推荐人姓名</view>
              <input class="text-(sm right)" v-model="formData.recommendLawyerName" placeholder="被推荐人姓名" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="sex">
            <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">被推荐人性别</view>
              <view class="grid grid-cols-2 gap-3 text-center">
                <view 
                  class="rounded p-2 text-sm/6"
                  :class="[formData.sex == 1 ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                  @click="formData.sex = 1"
                >男</view>
                <view 
                  class="rounded p-2 text-sm/6"
                  :class="[formData.sex == 0 ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                  @click="formData.sex = 0"
                >女</view>
              </view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="recommendLawyerCompany">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">所属律所名称</view>
              <input class="text-(sm right)" v-model="formData.recommendLawyerCompany" placeholder="填写律所名称" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="recommendLawyerYewu">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold flex-1">您推荐他的业务领域</view>
              <view class="text-(sm right) max-w-1/2 line-clamp-1"
                :class="{'text-#808080': formData.recommendLawyerYewu == ''}"
                @click="handlePopupBusinessOpen('recommendLawyerYewu')"
              >
              {{formData.recommendLawyerYewu || '选择业务领域' }}
              </view>
              <view class="i-ri-arrow-right-s-line text-#808080"></view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="recommendLawyerBusiness">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1 flex-1">您推荐他的业务类型</view>
              <view class="text-(sm right)"
                :class="{'text-#808080': formData.recommendLawyerBusiness == ''}"
                @click="handlePickerOpen('业务类型', 'recommendLawyerBusiness', businessTypeOptions)"
              >
              {{formData.recommendLawyerBusiness || '选择业务类型' }}
              </view>
              <view class="i-ri-arrow-right-s-line text-#808080"></view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="recommendLawyerPhone">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold">律师手机</view>
              <input class="text-(sm right)" v-model="formData.recommendLawyerPhone" placeholder="填写律师手机" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="recommendLawyerMail">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">律师邮箱</view>
              <input class="text-(sm right)" v-model="formData.recommendLawyerMail" placeholder="填写律师邮箱" />
            </view>
          </uni-forms-item>
        </view>
        
        <view class="mx-4 mt-3 bg-white p-3 rounded-lg grid gap-3" v-if="formData.recommendType == '客户推荐人'">
          <view class="text-lg">您与被推荐人</view>
          <uni-forms-item name="isbizval">
            <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">您是否合作过该律师</view>
              <view class="grid grid-cols-2 gap-3 text-center">
                <view 
                  class="rounded p-2 text-sm/6"
                  :class="[formData.isbizval == 1 ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                  @click="formData.isbizval = 1"
                >合作过</view>
                <view 
                  class="rounded p-2 text-sm/6"
                  :class="[formData.isbizval == 0 ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                  @click="formData.isbizval = 0"
                >未合作过</view>
              </view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="transaction">
            <template v-for="(item, index) in transaction" :key="item.key">
            <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">您与他合作在哪一年</view>
              <input class="text-(sm right)" v-model="item.year" placeholder="请填写年份" />
            </view>
            <view class="py-3 grid gap-3 border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">他为贵司服务的事项当中您觉得最满意的是</view>
              <view class="flex justify-between items-center">
                <view class="flex" @click="handlePickerTypeOpen(index)">
                  {{item.type}}
                  <view class="i-ri-arrow-down-s-line"></view>
                </view>
                <input class="text-(sm right)" v-model="item.title" placeholder="填写案例名称" />
              </view>
            </view>
            </template>
            <view class="text-(sm #1373FF center) mt-3" @click="handleAddTransaction">+ 添加一项</view>
          </uni-forms-item>
        </view>

        <view class="mx-4 mt-3 bg-white p-3 rounded-lg grid gap-1" v-if="formData.recommendType == '客户推荐人'">
          <view class="text-lg">您对被推荐人的评价</view>
          <uni-forms-item name="scoreStartone1">
            <view class="py-2 flex justify-between items-center">
              <view class="text-(sm #333333) font-semibold">专业水平</view>
              <uni-rate allow-half :size="32" color="#eeeff1" active-color="#FBAD38" v-model="formData.scoreStartone1" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="scoreStartone2">
            <view class="py-2 flex justify-between items-center">
              <view class="text-(sm #333333) font-semibold">行业经验</view>
              <uni-rate allow-half :size="32" color="#eeeff1" active-color="#FBAD38" v-model="formData.scoreStartone2" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="scoreStartone3">
            <view class="py-2 flex justify-between items-center">
              <view class="text-(sm #333333) font-semibold">沟通能力</view>
              <uni-rate allow-half :size="32" color="#eeeff1" active-color="#FBAD38" v-model="formData.scoreStartone3" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="scoreStartone4">
            <view class="py-2 flex justify-between items-center">
              <view class="text-(sm #333333) font-semibold">文书水平</view>
              <uni-rate allow-half :size="32" color="#eeeff1" active-color="#FBAD38" v-model="formData.scoreStartone4" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="scoreStartone5">
            <view class="py-2 flex justify-between items-center">
              <view class="text-(sm #333333) font-semibold">响应速度</view>
              <uni-rate allow-half :size="32" color="#eeeff1" active-color="#FBAD38" v-model="formData.scoreStartone5" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="scoreStartone6">
            <view class="py-2 flex justify-between items-center">
              <view class="text-(sm #333333) font-semibold">资源统筹</view>
              <uni-rate allow-half :size="32" color="#eeeff1" active-color="#FBAD38" v-model="formData.scoreStartone6" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="scoreStartone7">
            <view class="py-2 flex justify-between items-center">
              <view class="text-(sm #333333) font-semibold">工作效率</view>
              <uni-rate allow-half :size="32" color="#eeeff1" active-color="#FBAD38" v-model="formData.scoreStartone7" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="scoreStartone8">
            <view class="py-2 flex justify-between items-center">
              <view class="text-(sm #333333) font-semibold">服务意识</view>
              <uni-rate allow-half :size="32" color="#eeeff1" active-color="#FBAD38" v-model="formData.scoreStartone8" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="scoreStartone9">
            <view class="py-2 flex justify-between items-center">
              <view class="text-(sm #333333) font-semibold">商务经验</view>
              <uni-rate allow-half :size="32" color="#eeeff1" active-color="#FBAD38" v-model="formData.scoreStartone9" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="scoreStartone10">
            <view class="py-2 flex justify-between items-center">
              <view class="text-(sm #333333) font-semibold">工作成果</view>
              <uni-rate allow-half :size="32" color="#eeeff1" active-color="#FBAD38" v-model="formData.scoreStartone10" />
            </view>
          </uni-forms-item>
          <uni-forms-item name="recommendCon">
            <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
              <view class="text-(sm #333333) font-semibold">推荐理由</view>
              <textarea class="text-sm w-full h-30" v-model="formData.recommendCon" placeholder="请写出您的推荐理由和评价寄语，不少于20字" />
            </view>
          </uni-forms-item>
        </view>
      </template>
    </uni-forms>

    <view class="w-86 fixed bottom-0 mb-[--safe-area-inset-bottom] pb-5 left-50% -translate-x-50% z-10 bg-#F6F8FA">
      <view class="px-1 border-(~ solid #31946F) bg-#31946F/8 flex items-center rounded-lg space-x-2">
        <image class="w-7 -translate-y-2" src="https://static.minglvtang.com/images/icons/shield.png" mode="widthFix" />
        <view class="text-(sm #31946F)">我们竭诚保护您的数据安全，请放心填写</view>
      </view>
      <view class="mt-3 flex space-x-3">
        <view class="w-1/3">
          <uv-button
            size="large"
            text="上一步"
            :custom-style="{
              fontSize: '18px',
              height: '48px',
              borderRadius: '8px',
              borderColor: 'transparent'
            }"
            @click="handlePreviousStep"
          ></uv-button>
        </view>
        <view class="flex-1">
          <uv-button
            type="primary"
            size="large"
            :text="stepsCurrent == 1 ? '提交推荐' : '继续填写'"
            :custom-style="{
              fontSize: '18px',
              backgroundImage: 'linear-gradient(to right, #5199F9, #0164E6)',
              height: '48px',
              borderRadius: '8px',
              borderColor: 'transparent'
            }"
            @click="handleNextStep"
          ></uv-button>
        </view>
      </view>
    </view>
    <view class="h-40"></view>

    <uv-picker ref="pickerRef" :title="pickerTitle" :columns="pickerColumns" @confirm="handlePickerConfirm" round="12" confirmColor="#1373FF"></uv-picker>
    <uv-picker ref="pickerTypeRef" title="业务类型" :columns="[['诉讼', '非诉']]" @confirm="handlePickerTypeConfirm" round="12" confirmColor="#1373FF"></uv-picker>
    <!-- 行业领域 -->
    <uni-popup ref="popupIndustryRef" type="bottom">
      <view class="p-4 bg-white rounded-t-lg">
        <view class="flex items-center justify-between">
          <view class="text-(sm #909193)" @click="handlePopupClose">取消</view>
          <view class="text-sm">选择行业</view>
          <view class="text-(sm #1373FF)" @click="handlePopupConfirm">确定</view>
        </view>
        <view class="mt-5 gap-3 grid">
          <view class="mx-3">
            <uv-search placeholder="搜索" v-model="industrySearch" shape="square" bgColor="#F6F7F9" :showAction="false"></uv-search>
          </view>
          <view class="grid gap-3 px-3 pb-3 overflow-y-auto max-h-[60vh]">
            <view 
              v-for="item in industryList" :key="item"
              class="rounded px-3 py-2 text-sm/6 flex items-center"
              :class="[activeIndustry.includes(item) ? 'text-white bg-#1373FF border-(~ solid #1373FF)' : 'bg-white border-(~ solid black/8)']"
              @click="handleClickIndustryItem(item)"
            >
              <view class="flex-1">{{item}}</view>
              <view class="i-mdi-check-circle" :class="formData.recommendIndustryFr == item ? 'text-white' : 'text-#D9DDE4'"></view>
            </view>
          </view>
          <view class="text-(sm #207AFC center) mt-3" @click="handlePopupIndustryMoreOpen()">没有你的行业？备注说明</view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="popupIndustryMoreRef" type="bottom">
      <view class="p-4 bg-white rounded-t-lg">
        <view class="flex items-center justify-between">
          <view class="text-(sm #909193)" @click="handlePopupIndustryMoreClose">取消</view>
          <view class="text-sm">备注行业</view>
          <view class="text-(sm #1373FF)" @click="handlePopupIndustryMoreConfirm">确定</view>
        </view>
        <view class="mt-5 bg-#F6F7F9 rounded-lg p-2">
          <textarea class="text-sm w-full h-30" v-model="formData.recommendIndustryMore" placeholder="输入你的行业" />
        </view>
      </view>
    </uni-popup>

    <!-- 业务领域 -->
    <uni-popup ref="popupBusinessRef" type="bottom">
      <view class="p-4 bg-white rounded-t-lg">
        <view class="flex items-center justify-between">
          <view class="text-(sm #909193)" @click="handlePopupBusinessClose">取消</view>
          <view class="text-sm">选择领域</view>
          <view class="text-(sm #1373FF)" @click="handlePopupBusinessConfirm">确定</view>
        </view>
        <view class="mt-5 gap-3 ">
          <uni-collapse :border="false" accordion value="合规与监管">
            <uni-collapse-item :title="business.label"
             :border="false" title-border="none" :name="business.label" 
             :thumb="business.icon"
             v-for="business in businessOptions" :key="business.label"
            >
              <template></template>
              <view class="flex flex-wrap gap-2 px-3 pb-3">
                <view 
                  v-for="item in business.children" :key="item"
                  class="rounded px-3 py-2 text-sm/6 relative"
                  :class="[activeBusiness.includes(item) ? 'text-white bg-#1373FF border-(~ solid #1373FF)' : 'bg-white border-(~ solid black/8)']"
                  @click="handleClickBusinessItem(item)"
                >{{item}}</view>
              </view>
            </uni-collapse-item>
          </uni-collapse>
          <view class="text-(sm #207AFC center) mt-3" @click="handlePopupBusinessMoreOpen()">没有你的领域？备注说明</view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="popupBusinessMoreRef" type="bottom">
      <view class="p-4 bg-white rounded-t-lg">
        <view class="flex items-center justify-between">
          <view class="text-(sm #909193)" @click="handlePopupBusinessMoreClose">取消</view>
          <view class="text-sm">备注领域</view>
          <view class="text-(sm #1373FF)" @click="handlePopupBusinessMoreConfirm">确定</view>
        </view>
        <view class="mt-5 bg-#F6F7F9 rounded-lg p-2">
          <textarea class="text-sm w-full h-30" v-model="formData[currentField]" placeholder="输入你的领域" />
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped>
:deep(.uni-forms-item) {
  margin-bottom: 0;
}
:deep(.uni-collapse) {
  gap: 0.75rem;
}
:deep(.uni-collapse-item) {
  border-radius:12px;
  background-color: #F6F7F9;
}
:deep(.uni-collapse-item__wrap) {
  background-color: #F6F7F9;
}
:deep(.uni-collapse-item__title-box) {
  background-color: #F6F7F9;
  font-weight: 500;
}
:deep(.uni-collapse-item__title-text) {
  font-size:18px;
}
</style>
